<!DOCTYPE html>
<html>
<head>
    <title>3D Flip Login Form</title>
    <style>
        body { 
            margin: 0; 
            overflow: hidden; 
            font-family: Arial, sans-serif;
            background: #f0f0f0;
        }
        #login-container {
            position: absolute;
            width: 100%;
            height: 100%;
        }
        .flip-btn {
            position: absolute;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            padding: 10px 20px;
            background: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            z-index: 100;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <div id="login-container"></div>
    <button class="flip-btn" id="flipBtn">Flip to Register</button>

    <!-- 加载Three.js和GSAP（动画库） -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/gsap.min.js"></script>

    <script>
        // ========== 初始化Three.js场景 ==========
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.z = 10;

        const renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.getElementById('login-container').appendChild(renderer.domElement);

        // ========== 创建3D登录表单 ==========
        class LoginForm3D {
            constructor() {
                this.group = new THREE.Group();
                this.isFlipped = false;
                
                // 正面（登录表单）
                this.front = this.createFormSide(
                    ['Username', 'Password', 'Login'], 
                    0x2196F3 // 蓝色
                );
                
                // 背面（注册表单）
                this.back = this.createFormSide(
                    ['Email', 'Password', 'Confirm', 'Register'], 
                    0x4CAF50 // 绿色
                );
                this.back.rotation.y = Math.PI; // 初始旋转180度（背面）

                this.group.add(this.front);
                this.group.add(this.back);
                scene.add(this.group);
            }
            
            createFormSide(labels, color) {
                const side = new THREE.Group();
                
                // 背景板
                const bg = new THREE.Mesh(
                    new THREE.BoxGeometry(6, 8, 0.1),
                    new THREE.MeshPhongMaterial({ 
                        color: color,
                        transparent: true,
                        opacity: 0.9,
                        specular: 0x111111
                    })
                );
                side.add(bg);
                
                // 添加输入框和按钮
                labels.forEach((label, i) => {
                    const yPos = 3 - i * 1.5;
                    const isButton = label === 'Login' || label === 'Register';
                    
                    const element = new THREE.Mesh(
                        new THREE.BoxGeometry(4, 0.8, 0.2),
                        new THREE.MeshPhongMaterial({ 
                            color: isButton ? 0x333333 : 0xFFFFFF,
                            specular: 0x111111
                        })
                    );
                    element.position.set(0, yPos, 0.15);
                    side.add(element);
                });
                
                return side;
            }
            
            flip() {
                // 使用GSAP实现平滑翻转动画
                gsap.to(this.group.rotation, {
                    y: this.isFlipped ? 0 : Math.PI, // 0=正面，PI=背面
                    duration: 1.2,
                    ease: "back.out(0.5)"
                });
                this.isFlipped = !this.isFlipped;
                
                // 更新按钮文字
                document.getElementById('flipBtn').textContent = 
                    this.isFlipped ? 'Flip to Login' : 'Flip to Register';
            }
        }

        // ========== 添加光照 ==========
        const ambientLight = new THREE.AmbientLight(0x404040);
        scene.add(ambientLight);

        const directionalLight = new THREE.DirectionalLight(0xFFFFFF, 1);
        directionalLight.position.set(1, 1, 1);
        scene.add(directionalLight);

        // ========== 初始化表单 ==========
        const loginForm = new LoginForm3D();

        // 翻转按钮事件
        document.getElementById('flipBtn').addEventListener('click', () => {
            loginForm.flip();
        });

        // ========== 动画循环 ==========
        function animate() {
            requestAnimationFrame(animate);
            renderer.render(scene, camera);
        }
        animate();

        // 窗口大小调整
        window.addEventListener('resize', () => {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        });
    </script>
</body>
</html>